/* 
  路由懒加载-->把路由组件设置为异步组件 实现:1 分开打包 2.按需加载

*/

const Music = () => import("@/pages/Music");
const News = () => import("@/pages/News");
const Play = () => import("@/pages/Play");
const NotFound = () => import("@/pages/404");
const Guonei = () => import("@/pages/News/components/Guonei");
const Guoji = () => import("@/pages/News/components/Guoji");
const Yule = () => import("@/pages/News/components/Yule");
const MusicItem = () => import("@/pages/Music/components/Item");
const PlayItem = () => import("@/pages/Play/components/Item");
export default [
  //配置默认路由
  {
    path: "/",
    //默认路由配置,一般不会把默认地址直接配置一个组件,而是进行重定向
    // component: News,
    redirect: "/news",
  },
  //命名路由:有时候，通过一个名称来标识一个路由显得更方便一些,使用name属性来给路由命名
  {
    path: "/news",
    name: "News",
    component: News,
    //默认子路由的写法2:在父级路由配置上直接书写重定向(推荐)
    redirect: "/news/guonei",
    children: [
      //默认子路由的写法1:在子路由中额外配置(不推荐)
      /* {
        path: "",
        redirect: "guonei",
      }, */
      {
        /* 二级路由的地址两种方式:1.完整路由地址  2.当前路由地址(不带/) */
        path: "guonei",
        name: "Guonei",
        component: Guonei,
      },
      {
        path: "/news/guoji",
        name: "Guoji",
        component: Guoji,
      },
      {
        path: "/news/yule",
        name: "Yule",
        component: Yule,
      },
    ],
  },
  {
    path: "/music",
    name: "Music",
    component: Music,
    children: [
      {
        path: "item",
        name: "MusicItem",
        component: MusicItem,
      },
    ],
  },
  {
    path: "/play",
    name: "Play",
    component: Play,
    children: [
      {
        path: "item/:id/:name?",
        name: "PlayItem",
        component: PlayItem,
        //路由组件传参:可以在路由表中配置只要进入我的这个组件,就需要携带的参数
        //通过props配置项配置,组件内部通过props属性来接收
        //props配置项有3种,第一种直接是一个对象,可以把对象内部的值通过props传递给组件内部
        props: {
          a: 1,
          b: 2,
        },
      },
    ],
  },
  //任意路由配置
  //需要写在路由表的最下边,使用通配符 * 匹配所有路径
  {
    path: "*",
    component: NotFound,
  },
];
